<template>
  <flexbox class="main" direction="column" align="stretch">
    <xr-header
        icon-class="wk wk-enterprise"
        icon-color="#2362FB"
        label="企业首页"/>
    <div v-loading="loading" class="body">
      <!-- 基本信息 -->
      <div class="section">
        <div class="section-title">企业基本信息设置</div>
        <div class="section-content">
          <div class="name">企业名称</div>
          <el-input v-model="companyName" :maxlength="50"/>
        </div>
        <div class="section-content">
          <div class="name">企业logo</div>
          <el-upload v-if="!companyLogo" :show-file-list="false" :http-request="fileUpload"
                     drag
                     class="upload"
                     action="http"
                     accept="image/png, image/jpeg, image/gif, image/jpg">
            <i class="el-icon-plus uploader-icon"/>
          </el-upload>
          <div v-else class="upload-show">
            <img v-src="companyLogo">
            <i class="el-icon-remove icon-delete" @click="deleteCompanyLogo"/>
          </div>
        </div>
      </div>

      <!--      v-if="systemSaveAuth"-->
      <el-button class="save-button" type="primary" @click="save">保存
      </el-button>
    </div>
    <EditImage :fixed-number="[15, 4]"
               :show="showEditImage"
               :image="editImage"
               :file="editFile"
               title="编辑企业logo"
               preview-width="150px"
               preview-height="40px"
               preview-radius="0"
               width="550px"
               save-button-title="确定"
               @save="submiteImage"
               @close="showEditImage=false"/>
  </flexbox>
</template>

<script>
import {adminSystemSaveAPI} from '/src/api/admin/config.js'
import {crmFileSaveAPI} from '/src/api/common.js'

import RadialProgressBar from 'vue-radial-progress/src/RadialProgressBar.vue'
import EditImage from '/src/components/EditImage.vue'
import XrHeader from '/src/components/XrHeader/index.vue'
import {mapState} from "pinia";
import {useErpUserStore} from "../../../store/modules/usererp.js";
import {useAppStore} from "../../../store/modules/app.js";


export default {
  name: 'SystemConfig',
  components: {
    EditImage,
    XrHeader,
    RadialProgressBar
  },
  data() {
    return {
      loading: false,
      showEditImage: false,
      editImage: null,
      editFile: null,
      companyName: '',
      companyLogo: ''
    }
  },
  computed: {
    ...mapState(useErpUserStore, ['manage']),
    systemSaveAuth() {
      return this.manage && this.manage.system && this.manage.system.update
    }
  },

  created() {
    this.getDetail()
  },
  methods: {
    /**
     * 附件上传
     */
    fileUpload(content) {
      const reader = new FileReader()
      const self = this;
      reader.onload = function (e) {
        let result
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          result = e.target.result
        }
        self.editImage = result
        self.editFile = content.file
        self.showEditImage = true
      }
      reader.readAsDataURL(content.file)
    },

    /**
     * 删除图片
     */
    deleteCompanyLogo() {
      this.companyLogo = ''
    },

    /**
     * 获取详情
     */
    getDetail() {
      this.loading = true
      const erpUserStore = useAppStore();
      console.log("getDetail")
      erpUserStore.SystemLogoAndName()
          .then(res => {
            console.log("response2", res)
            this.loading = false
            const data = res.data.data || {}
            this.companyName = data.companyName ? data.companyName : ''
            this.companyLogo = data.companyLogo
          })
          .catch(() => {
            this.loading = false
          })
    },

    submiteImage(data) {
      this.loading = true
      crmFileSaveAPI({file: data.blob}).then(res => {
        const resData = res.data || {}
        this.companyLogo = resData.url
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 保存
     */
    save() {
      if (!this.companyName || !this.companyName.trim()) {
        this.$message.error('企业名称不能为空')
      } else {
        this.loading = true
        adminSystemSaveAPI({
          companyName: this.companyName,
          companyLogo: this.companyLogo
        })
            .then(res => {
              this.loading = false
              this.$message.success('操作成功')
              this.getDetail()
            })
            .catch(() => {
              this.loading = false
            })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 0 15px;
  height: 100%;
}

.body {
  flex: 1;
  overflow-y: auto;
  padding: 40px 30px 20px 30px;
  background-color: white;
  border: 1px solid #e6e6e6;
  border-radius: $xr-border-radius-base;
  position: relative;
}

// 进度信息
.progress-info {
  &-item {
    text-align: center;
    min-width: 150px;
    flex-shrink: 0;
    font-size: 14px;

    .info-title {
      color: #333;
    }

    .info-value {
      font-size: 13px;
      color: #999;
    }

    .info-value + .info-value {
      margin-top: 8px;
    }

    .progress {
      margin: 20px 0 30px;
      font-size: 12px;
      color: #333;

      &-value {
        font-weight: bold;
        margin-top: 10px;
      }
    }

    .radial-progress-container {
      display: inline-block;
    }
  }
}

.save-button {
  margin-left: 250px;
}

.section + .section {
  margin-top: 50px;
}

.section-title {
  color: #333;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 30px;
}

.section-content {
  margin-bottom: 30px;

  .name {
    color: #333;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .el-input {
    width: 300px;
  }
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.upload :deep( .el-upload-dragger) {
  width: 300px;
  height: 80px;
}

.upload-show {
  position: relative;
  display: block;
  width: 300px;
  height: 80px;

  img {
    width: 100%;
    height: 100%;
  }

  .icon-delete {
    position: absolute;
    top: -10px;
    right: -8px;
    color: red;
    font-size: 20px;
    display: none;
  }
}

.upload-show:hover {
  .icon-delete {
    display: block;
  }
}
</style>

